<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="/webmvcDemo/resource/js/VModel.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/webmvcDemo/resource/css/bootstrap/bootstrap.min.css">
<script src="/webmvcDemo/resource/js/jquery-3.2.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/webmvcDemo/resource/js/bootstrap/bootstrap.min.js"></script>
<script src="/webmvcDemo/resource/js/ajaxutil.js"></script>
<script src="/webmvcDemo/resource/js/singlepage.js"></script>
<title>Admin</title>

<style type="text/css">
table,tr,td,th {
	text-align: center;
}
</style>
</head>
<body>
	<div class="container">
		<div style="width: 800px; text-align: center; margin: 0 auto;">
			<h2>Add User</h2>
			<table style="text-align: center; margin: 0 auto;">
				<tbody id="add-user-template">
					<tr>
						<td>Username:</td>
						<td><input type="text" name="name" placeholder="Username" v-model="name" required>
						</td>
					</tr>
					<tr>
						<td>Sex:</td>
						<td>Man:<input type="radio" name="sex" value="true" v-model="sex">Female:<input
							type="radio" name="sex" value="false" v-model="sex">
						</td>
					</tr>
					<tr>
						<td>Salary:</td>
						<td><input type="text" name="salary" v-model="salary" required></td>
					</tr>
					<tr>
						<td>Birth:</td>
						<td><input type="date" name="birth" v-model="birth" required></td>
					</tr>
					<tr>
						<td></td>
						<td><button type="button" class="btn btn-success btn-add">Add</button></td>
					</tr>
				</tbody>
			</table>
		<div>
		<hr>
		<div>
			<h2>User List</h2>
			<table class="table table-striped ">
				<thead>
					<th>ID</th>
					<th>Name</th>
					<th>Sex</th>
					<th>Salary</th>
					<th>Birth</th>
					<th>Operation</th>
				</thead>
				<tbody id="list-body">
					<tr id="listTemplate" style="display:none;">
						<td>{{id}}</td>
						<td>{{name}}</td>
						<td>{{sex}}</td>
						<td>{{salary}}</td>
						<td>{{birth}}</td>
						<td>
							<button class="btn btn-primary btn-update">Update</button>
							<button class="btn btn-danger btn-delete">Delete</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">Update User</h4>
	      </div>
	      <div class="modal-body">
	        <table style="text-align: center; margin: 0 auto;">
				<tbody id="update-body">
					<tr>
						<td>ID:</td>
						<td><input id="input-id" type="text" name="id" v-model="id" disabled="disabled"></td>
					</tr>
					<tr>
						<td>Username:</td>
						<td><input id="input-name" type="text" name="name" placeholder="Username" v-model="name" required>
						</td>
					</tr>
					<tr>
						<td>Sex:</td>
						<td>Man:<input type="radio" name="sex" value="true" v-model="sex">Female:<input
							type="radio" name="sex" value="false" v-model="sex">
						</td>
					</tr>
					<tr>
						<td>Salary:</td>
						<td><input type="text" name="salary" v-model="salary" required></td>
					</tr>
					<tr>
						<td>Birth:</td>
						<td><input type="date" name="birth" v-model="birth" required></td>
					</tr>
					<tr>
						<td></td>
						<td><button id="btn-add" type="button" class="btn btn-success">Add</button></td>
					</tr>
				</tbody>
			</table>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button id="modal-btn-update" type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>

</body>
</html>